<template>
<view>
  <view class="list">
    <view
      v-for="(item, index) in listArr"
      :key="index"
      class="listItem"
      @tap="gotoPanel(index)"
    >
      <view class="listIcon1">
                <image src="../assets/images2/icon-list-layout.png" class="img"  mode="widthFix" />
      </view>
      <view class="listInfo">
        <view class="title">
          {{ item.title }}
        </view>
      </view>
      <view class="listIcon2">
        <AtIcon value="chevron-right" size="30" color="#5E8BFF"></AtIcon>
      </view>
    </view>
  </view>
</view>

</template>

<script>
export default {
  props: ["listArr"],
  name: "Mylist",
  mounted() {
    console.log(this.listArr)
  },
  methods:{
    gotoPanel(id) {
      this.$taro.navigateTo({
        url: `/pages/office/office?id=${id}`,
      })
    },
  }
}
</script>

<style scoped lang="less">
.list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.listItem {
  width: 90%;
  height: 3.072rem;
  background: #fff;
  box-shadow: 0 0.17067rem 0.85333rem #cccccc8c;
  border-radius: 0.21333rem;
  margin-bottom: 0.85333rem;
  flex-direction: row;
  padding: 0 0.64rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .listIcon1 {
    border: 1px solid #5E8BFF;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .listInfo {
    width: 9.38875rem;

    .title {
      color: #6A6A77;
      font-size: 0.79733rem;
      font-weight: bold;
    }
  }

  .img {
    width: 30px;
    height: 30px;
  }
}
</style>
